<template>
	<view class="container">
		<!-- <view class="bg">
			<NavigationBar backgroundColor="rgba(0,0,0,0)" :showIcon="false">
				<template #left></template>
				<template></template>
				<template #right></template>
			</NavigationBar>
		</view> -->
		<!-- <view class="header">
			<view class="title">
				无人机考试题库
			</view>
		</view> -->
		<view class="type-box">
			<view class="left">
				<view class="droneType">
					{{droneType||'多旋翼无人机'}}
				</view>
				<view class="idType">
					{{idType||'视距内驾驶员'}}
				</view>
			</view>
			<view class="right" @tap="goSelect">
				<view class="">
					切换
				</view>
				<u-icon name="arrow-right" color="#2764F2"></u-icon>
			</view>
		</view>
		<view class="section">
			<view class="box" @tap="toPractice">
				<view class="left">
					<view class="name">
						顺序练习
					</view>
					<view class="tips">
						{{currentIndex+1}}/{{total}}题
					</view>
					<view class="btn1">
						去练习
					</view>
				</view>
				<image src="https://q-api.guguzi.com/api/file/download/hZWM72iR6N_做练习.png" mode="" class="icon">
				</image>
			</view>
			<view class="box" @tap="toExamination">
				<view class="left">
					<view class="name">
						模拟考试
					</view>
					<view class="tips">
						平均分: {{average}}
					</view>
					<view class="btn2">
						去考试
					</view>
				</view>
				<image src="https://q-api.guguzi.com/api/file/download/hWyWZ14dkl_考试.png" mode="" class="icon">
				</image>
			</view>
		</view>
		<view class="cates">
			<view class="cate" @tap="toDailyPractice">
				<image
					src="https://q-api.guguzi.com/api/file/download/UA9molZ372_f712be31-5dd8-4712-b25e-cf67c593b944.png"
					mode="" class="icon">
				</image>
				<view class="">
					每日一练
				</view>
			</view>
			<view class="cate" @tap="toChapters">
				<image
					src="https://q-api.guguzi.com/api/file/download/7c1Myz1tRr_564163a3-ae8a-47cc-afab-16697bc0eef6.png"
					mode="" class="icon">
				</image>
				<view class="">
					章节练习
				</view>
			</view>
			<view class="cate" @tap="toExamLog">
				<image
					src="https://q-api.guguzi.com/api/file/download/8gxzex3nh3_efeb0ed3-35ee-47fd-8c84-42e92882cd72.png"
					mode="" class="icon">
				</image>
				<view class="">
					考试记录
				</view>
			</view>
			<view class="cate" @tap="toMyErrors">
				<image
					src="https://q-api.guguzi.com/api/file/download/ql6g9IWbgy_64d98087-8d6a-4ee8-a748-245be2891a60.png"
					mode="" class="icon">
				</image>
				<view class="">
					我的错题
				</view>
			</view>
			<view class="cate" @tap="toMyCollects">
				<image
					src="https://q-api.guguzi.com/api/file/download/fqhDKBBKz9_86c30f22-8e77-49f5-a136-d9668f3fc9e6.png"
					mode="" class="icon">
				</image>
				<view class="">
					我的收藏
				</view>
			</view>
		</view>
		<view class="comprehensive">
			<view class="title">
				综合问答
			</view>
			<view class="item">
				<view class="left">
					<view class="item-title">
						练习模式
					</view>
					<view class="">
						题库共167题,不限练习时长
					</view>
				</view>
				<u-icon name="arrow-right" size="40"></u-icon>
			</view>
			<view class="item" @tap="toQuestion3">
				<view class="left">
					<view class="item-title">
						考试模式
					</view>
					<view class="">
						每次出10题,20分钟内作答,答对>=7题合格
					</view>
				</view>
				<u-icon name="arrow-right" size="40"></u-icon>
			</view>
		</view>
		<view class="bottom-title">
			带你了解无人机
		</view>
		<swiper class="swiper-box" :current="current" :style="{'--height':height + 'rpx'}" :circular="circular" previous-margin="60rpx"
			next-margin="60rpx" @change="changeSwiper">
			<swiper-item v-for="(item, index) in banner" :key="index" class="swiper-item">
				<view class="swiper-content" :class="[current != index ? 'swiper-scsle' : '']">
					<view class="title">
						{{item.title}}
					</view>
					<view class="content">
						{{item.content}}
					</view>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted,
		unref,
		toRaw,
		toRefs,
		nextTick
	} from 'vue'
	import {
		onInit,
		onLoad,
		onReady,
		onShow,
		onHide,
		onUnload,
		onResize,
		onShareAppMessage,
		onShareTimeline
	} from '@dcloudio/uni-app'
	import {
		$http,
		toLogin,
		getCollection
	} from "@/common"
	import NavigationBar from "@/components/NavigationBar/NavigationBar.vue"
	const droneType = ref('')
	const idType = ref('')
	const circular = ref(true)
	const height = ref(240)
	const current = ref(0)
	const banner = ref([{
			title: '1考试时无人机的飞行速度有限制吗?',
			content: '有,不同等级考试要求不同,通常不能超规定时速,确保飞行安全与操控精准度'
		},
		{
			title: '2考试时无人机的飞行速度有限制吗?',
			content: '有,不同等级考试要求不同,通常不能超规定时速,确保飞行安全与操控精准度'
		},
		{
			title: '3考试时无人机的飞行速度有限制吗?',
			content: '有,不同等级考试要求不同,通常不能超规定时速,确保飞行安全与操控精准度'
		}
	])
	onShareAppMessage(() => {
		return {
			title: '翼考一点通,聚焦于无人机驾考服务,助你轻松通过无人机驾考',
			path: "/pages/home/index",
			imageUrl: "https://q-api.guguzi.com/api/file/download/GSOTLpmSqq_9bd8cf79-37a9-4787-8fac-dfb673fde72c.png"
		}
	})
	onShareTimeline(() => {
		return {
			title: '翼考一点通',
			imageUrl: "https://q-api.guguzi.com/api/file/download/j7IykbZoSS_logo.png"
		}
	})
	onLoad(() => {
		if (uni.getStorageSync('userInfo')) {
			getData()
		} else {
			toLogin().then(result => {
				getData()
			})
		}
	})
	const average = ref(0)
	const total = ref(0)

	function getData() {
		$http.get("examLog").then(res => {
			if (res && res.length > 0) {
				average.value = (res.map(item => item.score).reduce((acc, cur) => acc + cur, 0) /
					res.length).toFixed(1)
			}
		})
		$http.get('questionBank', {
			pageNumber: 1,
			pageSize: 10
		}).then(res => {
			total.value = res.total
		})
		setTimeout(() => {
			getCollection()
		}, 1000)
	}

	const currentIndex = ref(0)
	onShow(() => {
		if (uni.getStorageSync('data0')) {
			currentIndex.value = JSON.parse(uni.getStorageSync('data0')).currentIndex
		}
		if (uni.getStorageSync('droneTypes')) {
			droneType.value = JSON.parse(uni.getStorageSync('droneTypes')).find(item => item.checked).name
		}
		if (uni.getStorageSync('idTypes')) {
			idType.value = JSON.parse(uni.getStorageSync('idTypes')).find(item => item.checked).name
		}
	})

	function toPractice() {
		uni.navigateTo({
			url: '/pages/home/practice'
		})
	}

	function toExamination() {
		uni.navigateTo({
			url: '/pages/home/examination'
		})
	}

	function goSelect() {
		uni.navigateTo({
			url: '/pages/home/select'
		})
	}

	function toExamLog() {
		uni.navigateTo({
			url: '/pages/home/examLog'
		})
	}

	function toMyErrors() {
		uni.navigateTo({
			url: '/pages/home/myErrors?type=0'
		})
	}

	function toMyCollects() {
		uni.navigateTo({
			url: '/pages/home/myErrors?type=1'
		})
	}

	function toDailyPractice() {
		uni.navigateTo({
			url: '/pages/home/dailyPractice'
		})
	}

	function toChapters() {
		uni.navigateTo({
			url: "/pages/home/chapters"
		})
	}
	function changeSwiper(e) {
		current.value = e.detail.current
	}
	function toQuestion3() {
		uni.navigateTo({
			url: '/pages/home/question3?num=10'
		})
	}
</script>

<style lang="scss" scoped>
	.bg {
		position: fixed;
		top: 0;
		width: 100%;
		height: 180px;
		overflow: hidden;
		z-index: 99;
	}
	.bg:after {
		width: 180%;
		height: 180px;
		position: absolute;
		left: -40%;
		top: 0;
		z-index: -1;
		content: "";
		border-radius: 0 0 50% 50%;
		background: #EFF9FE;
		backface-visibility: hidden;
		transform: translateZ(0);
	}
	.container {
		min-height: 100vh;
		background: linear-gradient(to bottom, #EFF9FE, #F9F9F9);
		padding: 20rpx 20rpx 100rpx 20rpx;

		.header {
			.title {
				font-size: 34rpx;
				font-weight: bold;
			}
		}

		.type-box {
			display: flex;
			justify-content: space-between;
			padding: 30rpx 20rpx;
			margin: 30rpx 0;
			background-color: #fff;
			border-radius: 20rpx;

			.left {
				display: flex;
				align-items: center;

				.droneType {
					font-size: 32rpx;
					font-weight: bold;
					margin-right: 10rpx;
				}

				.idType {
					color: #696969;
				}
			}

			.right {
				display: flex;
				align-items: center;

				view {
					color: #2764F2;
					margin-right: 6rpx;
					font-weight: bold;
				}
			}
		}

		.section {
			display: flex;
			justify-content: space-between;

			.box {
				display: flex;
				align-items: flex-end;
				justify-content: space-between;
				background-color: #fff;
				padding: 30rpx 20rpx;
				width: 48%;
				border-radius: 20rpx;

				.left {
					.name {
						font-size: 34rpx;
						font-weight: bold;
					}

					.tips {
						color: #696969;
						margin: 6rpx 0 60rpx 0;
					}

					.btn1 {
						width: 140rpx;
						height: 50rpx;
						border-radius: 25rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						font-size: 28rpx;
						background-color: #D0DFFF;
					}

					.btn2 {
						font-size: 28rpx;
						width: 140rpx;
						height: 50rpx;
						border-radius: 25rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						background-color: #D6F2FE;
					}
				}

				.icon {
					width: 90rpx;
					height: 90rpx;
					margin-bottom: 10rpx;
				}
			}
		}

		.cates {
			display: flex;
			justify-content: space-between;
			background-color: #fff;
			padding: 20rpx 10rpx;
			margin: 20rpx 0;

			.cate {
				display: flex;
				flex-direction: column;
				align-items: center;
				width: 150rpx;

				.icon {
					width: 60rpx;
					height: 60rpx;
					margin-bottom: 10rpx;
				}

				view {
					font-size: 26rpx;
				}
			}
		}

		.comprehensive {
			background-color: #fff;
			padding: 30rpx 20rpx;

			.title {
				font-size: 30rpx;
				font-weight: bold;
			}

			.item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin: 20rpx 0;
				background-color: #F5FAFE;
				padding: 30rpx 20rpx;
				border-radius: 8rpx;

				.item-title {
					font-size: 34rpx;
					font-weight: bold;
					margin-bottom: 20rpx;
				}
			}
		}
        .bottom-title{
			margin: 26rpx 0;
			font-weight: bold;
			font-size: 30rpx;
		}
		.swiper-box {
			width: 100%;
			height: var(--height);

			.swiper-item {
				padding: 0 10rpx;
				box-sizing: border-box;
				
			}

			.swiper-content {
				background-color: #fff;
				width: 100%;
				height: var(--height);
				display: block;
				border-radius: 12rpx;
				padding: 20rpx;
			}

			.swiper-scsle {
				transform: scaleY(0.9);
				transform-origin: center center;
			}
			.title{
				color:#2764F2;
				margin-bottom: 20rpx;
				font-weight: bold;
			}
			.content{
				line-height: 1.6;
			}
		}
	}
</style>